<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            border: 1px solid #333;

        }
        thead tr{
            display: table-row;
            border-color: inherit;
            vertical-align: inherit;
            height: 40px;
            background-color: #ccc;
            border: 1px solid #333;
        }
        td{
            border: 1px solid #333;
        }
        
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var student = [
            {
                name:'魏璎珞',
                subject:'java',
                score:99
            },
            {
                name:'魏璎珞',
                subject:'java',
                score:99
            },
            {
                name:'魏璎珞',
                subject:'java',
                score:99
            },
            ];
            let text =  document.querySelector('tbody')
            for(var i = 0; i< student.length; i++){
                //创建tr
                let tr = document.createElement('tr');
               //将tr添加到tbody里面
                text.appendChild(tr);
                //行内创建单元格，单元格的数量取决于每个对象里面的属性个数
                //遍历数组对象for(var k in obj){}
                for(var k in student[i]){
                    //创建Td单元格
                    let td = document.createElement('td');
                    td.innerHTML = student[i][k]
                    tr.appendChild(td)
                }
                //3。创建有删除元素的单元格
                let td = document.createElement('td');
                td.innerHTML = '<a href="javaScript:;">删除</a>';
                tr.appendChild(td)
            }
            //4删除

            let a = document.querySelectorAll('a');
            for(var i = 0; i< a.length; i++){
                a[i].onclick = function(){
                    text.removeChild(this.parentNode.parentNode)
                }
            }
    </script>
</body>
</html>